<template>
	<view class="buymovie_bg" :style="{'height':totalH > 0 ? totalH + 'px' : ''}">
		<title :center="false" @titleHeight='setPaddingTop' :title="titleNM" icon="icon" iconSize="38" color="#2e2e2e"
		 :bold="false" bgcolor="#fff" @toclick="toBack(1)"></title>
		<view class="cinemaInfo" :style="{'padding-top': (height+10)  + 'px'}">
			<view class="title-info-box">
				<text class="cinema overflow">{{cinemaInfo.nm}}</text>
				<view class="cinema_hui overflow">{{cinemaInfo.addr}}</view>
			</view>
			<view class="image-box" @click="map_tiao">
				<image src="../static/ditu.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="movieSwiper" v-if="movieList.length > 0" :style="{'top':cinemaInfo+'px'}">
			<image class="background-img-vague" :src="chooseMovice.img" mode=""></image>
			<view class="wrap">
				<swipers :list="movieList" height="260" mode="none" name="img" :autoplay="false" img-mode="scaleToFill" class="swiper_bg"
				 :effect3d="true" bg-color="none" :circular="false" effect3d-previous-margin="280" @change="setBackground()" @click="setBackground()" :current="swiperCurrent"></swipers>
			</view>
		</view>
		<view class="movieName" v-if="movieList.length > 0" :style="{'top': height  + 'px'}">
			<view>
				<text>{{chooseMovice.nm || '电影名称'}}</text>
				<text class="cinema_red" v-if="chooseMovice.sc">
					<text style="font-weight: bold;">{{chooseMovice.sc || 0 | toFixed(1)}}</text>分
				</text>
			</view>
			<view class="movieDur">{{chooseMovice.dur || 120}}分钟 {{chooseMovice.cat.split('|').join(' ') || ''}}</view>
		</view>
		<!-- <view class="movieDur" v-if="movieList.length > 0">
			{{chooseMovice.dur || 120}}分钟|{{chooseMovice.cat || ''}}|{{chooseMovice.star || ''}}
		</view> -->
		<view class="movieList">
			<view class="tabborder"  :style="{'top': (height+movieNameHeight) + 'px'}">
				<tabs :list="timeList" name="showDate" height="40" inactive-color="#666" active-color="#FF4345"  :timeTab="true"
				 :is-scroll="t" :current="timeCurrent" @change="changeTimeTab"></tabs>
			</view>
			<view class="movice-item" :style="{opacity: isOut(item.show_time) ? 1: 0.5}" v-for="(item, index) in desklist" :key="index">
				<view class="movie_city">
					<view class="time_left">
						<view class="time_font">{{item.show_time | formateDate('HH:mm')}}</view>
						<view class="time_hui">{{item.show_time | getExtendTime(item.duration,'m','HH:mm')}}散场</view>
					</view>
					<view class="Mandarin">
						<view class="Mandarin_font1">{{item.show_version_type}}</view>
						<view class="Mandarin_font2 overflow">{{item.hall_name}}</view>
					</view>
					<view class="qian_fen">
						<view class="qian_fen_font1">￥<view>{{item.wp_price}}</view>起</view>
						<view class="qian_fen_font2">￥{{item.wp_original_price}}</view>
					</view>
				</view>
				<view class="goupiao-box" @click="toLinkQuery(item, isOut(item.show_time))">
					<view class="goupiao">
						{{isOut(item.show_time) ? '购票': '停售'}}
					</view>
				</view>
			</view>
			<view class="no-movice-order" v-if="movieList.length > 0 &&desklist.length <= 0 && !loading && !noShowDesklist" @click="changeTimeTab(timeCurrent + 1)">
				<view>今天已放映完</view>
				<view>看看其他时间</view>
			</view>
		</view>
		<block v-if="movieList.length <= 0 && !loading && !noShowMovieList">
			<view class="no-cinema-data" :style="{'padding-top':'121px'}">
				<view class="iconfont icon-zanwudingdan"></view>
				<image src="../../static/img/other/notMovieSession@2x.png" mode="widthFix" :style="{'max-width':'220px'}"></image>
				<view>目前暂无场次安排 晚点再来吧~</view>
			</view>
		</block>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import swipers from '@/pages/components/u-swiper.vue'
	import tabs from '@/pages/components/u-tabs.vue'
	export default {
		data() {
			return {
				height: 0,//自定义title的高度
				loading: false,
				//swiper默认选中
				swiperCurrent: 0,
				//url参数
				options: {},
				//影院信息
				cinemaInfo: {},
				//电影列表
				movieList: [],
				triggered: false,
				// 列表分页
				boxHeight: 0,
				// 刷新
				freshing: false,
				// 时间tab选中内容
				timeCurrent: 0, 
				//选中的电影
				chooseMovice: {}, 
				// 时间表
				timeList: [],
				// 场次列表
				desklist: [],
				// 新增 控制进入时先不要显示暂无
				noShowMovieList:true,
				noShowDesklist:true,
				listH:0,
				cinemaInfoHeight:0,//cinemaInfo的高度
				movieNameHeight:0,//movieName的高度
				totalH:0,//页面总高度
				titleNM: '影院',//需要动态改变的title
				init: true,//是否是初始化
				saveDate:false,//用于在进入座位页面又返回时仍显示之前的时间
			}
		},
		components: {
			title,
			swipers,
			tabs
		},
		computed: {
			isOut(val) {
				return (val) => {
					let t1= this.$moment(val);
					let t2 = this.$moment(new Date());
					//计算时间差并转换成标准时间单位
					let dura = t1.format('x') - t2.format('x');
					let tempTime = this.$moment.duration(dura);
					// return tempTime.asMinutes() > 60 ? true : false 
					return tempTime.asMinutes() > 30 ? true : false
				}
			},
			movie_top_height100(v){
				return this.movieList.length <= 0 && !this.loading?'100vh':''
			},
		},
		onLoad(options) {
			this.options = options
			// console.log(this.options)
			this.setHeight('init')
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.getMovieList()
		},
		onPageScroll(e) {
			if(this.titleNM === '影院' && e.scrollTop > 69){
				this.titleNM = this.cinemaInfo.nm
			}
			if(this.titleNM === this.cinemaInfo.nm && e.scrollTop < 69){
				this.titleNM = '影院'
			}
			
		},
		methods: {
			setPaddingTop(data){
				this.height = data.height
				// this.boxHeight = (this.$store.state.windowHeight - this.height)
				// console.log('data',data)
			},
			
			// 返回
			toBack(index) {
				// console.log('返回上一级');
				this.$common.toBack(index)
			},
			// 购买跳转
			toLinkQuery(item, state) {
				// console.log(this.cinemaInfo);
				this.$store.commit('setSeatCopyInfo',{
					cinema_name: this.cinemaInfo.nm,
					cname: '',
					dim: item.show_version_type,
					hallName: item.hall_name,
					img: '',
					mid: null,
					movieName: item.film_name,
					seatList: [],
					showTime: item.show_time,
					tel: '',
					tp: item.plan_type,
				})
				if(state) {
					this.saveDate = true//再返回时仍显示当前选择
					this.$common.toLinkQuery('seat', {
						no: item.show_id,
						cinemaId: item.cinema_id,
						mid:this.options.mid,
						// dates:this.options.dates,
						dates:this.timeList[this.timeCurrent].showDate,
						timeLength:item.duration,
						show_time: this.$moment(item.show_time).format('x').toString()
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '本场次距离放映不足半个小时，请更换场次'
					})
				}
			},
			// 切换轮播改变背景
			setBackground(index) {
				console.log('切换轮播');
				this.swiperCurrent = index
				this.chooseMovice = this.movieList[index]
				this.options.mid = this.chooseMovice.mid
				uni.showLoading({
					title: '加载中'
				})
				// this.changeTimeTab(0)
				this.getShows()
			},
			// 时间tab切换
			changeTimeTab(index) {
				console.log('时间tab切换');
				if(index < this.timeList.length){
					uni.showLoading({
						title: '加载中'
					})
					this.timeCurrent = index
					// this.options.dates = this.timeList[index].showDate
					this.getShows(true)
				}
			},
			
			// 下拉刷新事件
			refresh() {
				console.log('下拉刷新事件');
				this.freshing = true
				this.getShows(true)
			},
			// 电影跳转
			map_tiao() {
				uni.navigateTo({
					url: `/subpages/location/location?cinemaid=${this.options.cinemaId}`
				})
			},
			// 获取当前影院的某一电影上映的日期列表
			async getDays() {
				this.loading = true
				await this.$api.getDays({
					cinemaid: this.options.cinemaId,
					mid: this.options.mid,
				}).then(res => {
					this.loading = false
					this.timeList = res.data.data
					// 是否是初始化阶段，是否是从影片详情选中具体日期进入的
					if(this.options.dates && this.init){
						this.timeList.some((i,index)=>{
							if(i.showDate == this.options.dates){
								this.timeCurrent = index
							}
						})
						this.init = false // 初始化结束
					}else{
						// 当是从座位页返回时，仍然显示之前选择的
						if(this.saveDate){
							//此时this.timeCurrent不改变，显示之前选择的时间
						}else {
							// 此时是切换影片，显示距离当前最近的一天
							this.timeCurrent = 0
						}
					}
				})
			},
			// 获取当前影院上映的电影列表
			getMovieList() {
				console.log('获取当前影院上映的电影列表');
				this.$api.getMovieList({
					cinemaid: this.options.cinemaId
				}).then(res => {
					let data = res.data.data
					this.cinemaInfo = data.cinema
					this.movieList = data.movieList
					let index = 0
					if(this.options.mid != -1) {
						index = this.movieList.findIndex(item=>item.mid== this.options.mid)
					}
					if(this.movieList.length > 0) {
						this.swiperCurrent = index
						this.options.mid = this.movieList[index].mid
						this.chooseMovice = this.movieList[index]
						this.getShows()
					} else {
						uni.hideLoading()
					}
					
					this.noShowMovieList = false //可以显示暂无了
				})
			},
			// 获取当前影院的某一电影某天的所有可以购买的场次
			async getShows(status = false) {
				if(status) {
					uni.showLoading({
						title: '加载中'
					})
				} else {
					await this.getDays()
				}
				this.$api.getShows({
					cinemaid: this.options.cinemaId,
					mid:  this.options.mid,
					date: this.timeList[this.timeCurrent]?this.timeList[this.timeCurrent].showDate : this.options.dates,
					// date: this.options.dates,
				}).then(res => {
					this.desklist = res.data.data
					this.freshing = false
					uni.hideLoading()
					this.noShowDeskList = false//可以显示暂无了
					this.setHeight()//计算list占得高度
				})
			},
			// 电影场次回来后计算list的高度
			setHeight(type){
				this.$nextTick(()=>{
					const query = uni.createSelectorQuery();
					// query.select('.buymovie_bg').boundingClientRect().exec(data =>{
					// 	totalH = data[0].height
					// 	// console.log(data[0].height);
					// });
					// const query1 = uni.createSelectorQuery();
					// 		query1.select('.movie_top').boundingClientRect().exec(data =>{
					// 			this.listH = totalH - data[0].height
					// 		});
					if(type = 'init'){
						query.select('.cinemaInfo').boundingClientRect((res)=>{
							// console.log('cinemaInfo',res);
							this.cinemaInfoHeight = res.height
						}).exec()
						query.select('.movieName').boundingClientRect((res)=>{
							// console.log('movieName',res);
							if(res)this.movieNameHeight = res.height
						}).exec()
					}else{
						query.selectAll('.movice-item').boundingClientRect(data =>{
							this.totalH = data[data.length -1].bottom
						}).exec()
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.buymovie_bg {
		min-height: 100vh;
		.cinemaInfo {
			display: flex;
			padding: 20rpx 30rpx;
			align-items: center;
			.title-info-box {
				width: 600rpx;
				min-height: 94rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				
			
				.cinema {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
					line-height: 32rpx;
				}
			
				.cinema_hui {
					margin-top: 14rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 24rpx;
				}
			}
			.image-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			
				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}
			}
		}
		.movieSwiper {
			position: relative;
			height: 324rpx;
			overflow: hidden;
			
			.background-img-vague {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			
			/deep/.u-swiper-item {
				width: 193rpx !important;
				height: 260rpx !important;
			}
			
			// 影院背景图
			.moviebg {
				width: 100%;
				height: 100%;
				filter: blur(10rpx);
			}
			
			.wrap {
				position: absolute;
				left: 0;
				top: 26rpx;
				right: 0;
				margin: 0 auto;
			}
			
			.box {
				width: 0;
				height: 0;
				border: 10rpx solid;
				border-color: transparent transparent #fff #fff;
				transform: rotate(135deg);
				position: absolute;
				bottom: -10rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}
		.movieName {
			width: 100%;
			position: sticky;
			background-color: #fff;
			z-index: 1;
			view:first-child {
				display: flex;
				justify-content: center;
				line-height: 80rpx;
				>text {
					color: #303030;
					font-size: 32rpx;
				}
				
				.cinema_red {
					color: #F34776;
					margin-left: 10rpx;
					font-size: 24rpx;
					transform: translateY(4rpx);
				}
			}
			
			.movieDur {
				padding: 0 30rpx 24rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				text-align: center;
				
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.tabborder {
			padding-top: 10rpx;
			padding-left: 40rpx;
			height: 100rpx;
			position: sticky;
			background-color: #fff;
			z-index: 99;
		}
		.movice-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100vw;
			border-bottom: 2rpx solid rgba(232,234,238,0.6);
			.movie_city {
				display: flex;
				padding: 28rpx 40rpx;
				width: calc(100% - 136rpx);
			
				.time_left {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 84rpx;
					width: 120rpx;
			
					.time_font {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #000000;
					}
			
					.time_hui {
						font-size: 24rpx;
						color: #aaa;
					}
				}
				.Mandarin {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 24rpx;
					width: calc(100% - 152rpx - 144rpx);
				
					.Mandarin_font2 {
						color: #aaa;
						font-size: 24rpx;
						// width: 230rpx;
						width: 100%;
					}
				
					.Mandarin_font1 {
						color: #666666;
						font-size: 28rpx;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
				
				.qian_fen {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 32rpx;
					// flex: 1;
					width: 120rpx;
				
					.qian_fen_font1 {
						color: #FF4345;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						>view {
							display: flex;
							align-items: flex-end;
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				
					.qian_fen_font2 {
						text-decoration: line-through;
						color: #aaa;
						font-size: 24rpx;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
			.goupiao-box {
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 136rpx;
				.goupiao {
					width: 96rpx;
					height: 44rpx;
					border-radius: 44rpx;
					border: 2rpx solid #FF4345;
					margin-right: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF4345;
				}
			}
			
		}
	} 
</style>